<template>
  <component
    :is="LabelConfig"
    v-if="PageDataHooks.dataInfo.isLeftContainer"
    v-bind="{ PageDataHooks }"
  ></component>
  <component :is="OtherPage" v-bind="{ PageDataHooks }" v-else></component>
  <Dialog
    v-bind="{ ...PageDataHooks.dialogDataInfo, ...$attrs }"
    @cancel="PageDataHooks.handleCancel"
    @update:visible="PageDataHooks.handleVisible"
    modal-class="mark-page-modal"
  >
    <!-- 标注类型弹框内容-->
    <TypeModal
      v-if="PageDataHooks.dataInfo.pageType === 1 && PageDataHooks.dialogDataInfo.visible"
      v-bind="{
        ...PageDataHooks.dialogDataInfo,
        ...$attrs,
        handleTypeAdd: PageDataHooks.handleTypeAdd,
        handleTypeDel: PageDataHooks.handleTypeDel,
        handleGroupChange: PageDataHooks.handleGroupChange,
        formRef: PageDataHooks.formRef,
      }"
    />
    <!-- 标注组件弹框内容-->
    <CompModal
      v-if="PageDataHooks.dataInfo.pageType === 2 && PageDataHooks.dialogDataInfo.visible"
      v-bind="{
        ...PageDataHooks.dialogDataInfo,
        ...$attrs,
        handleCompAdd: PageDataHooks.handleCompAdd,
        handleCompDel: PageDataHooks.handleCompDel,
        handleCompChildDel: PageDataHooks.handleCompChildDel,
        handleCompChildAdd: PageDataHooks.handleCompChildAdd,
        formRef: PageDataHooks.formRef,
      }"
    />
    <!-- 标注工具弹框内容-->
    <ToolModal
      v-if="PageDataHooks.dataInfo.pageType === 3 && PageDataHooks.dialogDataInfo.visible"
      v-bind="{
        ...PageDataHooks.dialogDataInfo,
        ...$attrs,
        formRef: PageDataHooks.formRef,
      }"
    />
    <!-- 标注配置弹框内容-->
    <ConfigModal
      v-if="PageDataHooks.dataInfo.pageType === 4 && PageDataHooks.dialogDataInfo.visible"
      v-bind="{
        ...PageDataHooks.dialogDataInfo,
        ...$attrs,
        formRef: PageDataHooks.formRef,
      }"
    />
  </Dialog>
</template>

<script lang="ts" setup name="MarkPage">
import OtherPage from "./components/OtherPage.vue";
import LabelConfig from "./components/LabelConfig.vue";
import Dialog from "@/components/dialog/index.vue";
import TypeModal from "./components/TypeModal.vue";
import CompModal from "./components/CompModal.vue";
import ToolModal from "./components/ToolModal.vue";
import ConfigModal from "./components/ConfigModal.vue";
import usePageData from "./hooks/usePageData";

const PageDataHooks = usePageData();
</script>

<style lang="less" scoped>
@import url("./styles/markPage.less");
</style>
<style lang="less">
.mark-page-modal {
  .arco-modal-body {
    padding: 0;
  }
  .arco-modal-footer {
    padding: 0;
    padding-top: 53px;
    padding-bottom: 32px;
    .arco-btn:nth-of-type(1) {
      margin-right: 24px;
    }
  }
  .arco-btn-primary.arco-btn-disabled,
  .arco-btn-primary[type="button"].arco-btn-disabled,
  .arco-btn-primary[type="submit"].arco-btn-disabled {
    background-color: rgba(68, 142, 151, 0.5);
    color: rgba(255, 255, 255, 0.5);
  }
}
</style>
